import React, { PureComponent, ReactNode } from 'react'
import { Button, Card, Loading } from '@alifd/next';
import TableList from '@/components/TableList';
import { getCouponList } from '@/api/coupon';
import { ticketTypeEnum,
  ticketStatusEnum,
  distributionTypeEnum,
  validPeriodTypeEnum,
  bindTypeEnum,
  bindUserTypeEnum,
  showPlatformEnum } from '@/models/interface/promotion';
interface Props {}
interface State {
  dataSource: any,
  total: number,
  pageNum: number,
  visible: boolean,
}

class CouponList extends PureComponent<Props, State> {
  constructor(props: Props) {
    super(props)

    this.state = {
      dataSource: [],
      total: 0,
      pageNum: 1,
      visible: false,
    }
  }
  // 数据列表
  getList = async () => {
    this.setState({
      visible: true,
    })
    const { code, result }: any = await getCouponList({
      pageNum: this.state.pageNum,
      pageSize: 20,
    });
    if (!code) {
      this.setState({
        dataSource: result.data.map((item) => {
          return {
            ...item,
            distributionType: distributionTypeEnum[item.distributionType],
            ticketTypeName: ticketTypeEnum[item.ticketType],
            validPeriodType: validPeriodTypeEnum[item.validPeriodType],
            bindType: bindTypeEnum[item.bindType],
            bindUserType: bindUserTypeEnum[item.bindUserType],
            showPlatform: showPlatformEnum[item.showPlatform],
            ticketStatusName: ticketStatusEnum[item.ticketStatus],
          }
        }),
        total: result.total,
        visible: false,
      });
    }
  }
  componentWillMount() {
    this.getList();
  }
  // 分页监听
  pageChange = (val: number) => {
    this.setState({
      pageNum: val,
    });
    this.getList();
  }
  // 操作
  setCell = (...args: any[]) => {
    return <Button
      text
      type="primary"

    >
      编辑
      </Button>
  }
  // 总量
  setCount = (...args: any[]) => {
    return <Button type="primary" text>
      {args[2].ticketNum + '/' + args[2].getNum + '/' + args[2].usedNum + '/' + args[2].stockNum }
    </Button>
  }
  couponTable = [
    {
      key: '1',
      title: '优惠券名称',
      dataIndex: 'ticketName',
      width: 120,
    },
    {
      key: '1',
      title: '总量/领取/使用/余量',
      render: this.setCount,
    },
    {
      key: '1',
      title: '发放方式',
      dataIndex: 'distributionType',
      width: 130,
    },
    {
      key: '1',
      title: '优惠方式',
      dataIndex: 'ticketTypeName',
      width: 120,
    },
    {
      key: '1',
      title: '优惠券有效期类型',
      dataIndex: 'validPeriodType',
       width: 130,
    },
    {
      key: '1',
      title: '有效期',
      dataIndex: 'startTime',
      dataIndex1: 'endTime',
      type: 'times',
      width: 170,
    },
    {
      key: '1',
      title: '适用范围',
      dataIndex: 'bindType',
      width: 120,
    },
    {
      key: '1',
      title: '适用对象',
      dataIndex: 'bindUserType',
      width: 120,
    },
    {
      key: '1',
      title: '适用平台',
      dataIndex: 'showPlatform',
      width: 120,
    },
    {
      key: '1',
      title: '状态',
      dataIndex: 'ticketStatusName',
    },
    {
      key: '1',
      title: '操作',
      render: this.setCell,
    },
  ]
  render(): ReactNode {
    return (
      <Loading tip="加载中..." visible={this.state.visible} >
        <Card free>
          <Card.Content>
            <TableList
              columns={this.couponTable}
              dataSource={this.state.dataSource}
              total={this.state.total}
              pageNum={this.state.pageNum}
              pageChange={this.pageChange}
            />
          </Card.Content>
        </Card>
      </Loading>
    )
  }
}

export default CouponList
